<template>
    <view class="page">
        <!-- 背景图 -->
        <!-- <image class="bg" src="../../static/tab_car_bg.png"></image> -->
		
		<view class="top-bg">
			<!-- 搜索框 -->
			<view class="serach-wrap">
			    <u-search shape="square" v-model="keywords" bgColor="#fff" placeholder="请输入车型名称搜索" placeholderColor="#CDCDCD" :showAction="false" @search="doSearch(keywords)"></u-search>
			</view>
		</view>
		
        
        <view class="filter">
            <view class="title">选车型</view>
            <view class="select-wrap">
                <view class="select" @click="selectModel"><text style="margin-right: 5upx;font-size: 24upx;font-weight: bold;color: #333;">{{conditionValue0}}</text>
                    <u-icon name="arrow-down" size="12" color="#333"></u-icon>
                </view>
                <view class="select" @click="selectRenttype"><text style="margin-right: 5upx;font-size: 24upx;font-weight: bold;color: #333;">{{conditionValue1}}</text>
                    <u-icon name="arrow-down" size="12" color="#333"></u-icon>
                </view>
            </view>
        </view>
        <!-- 列表 -->
        <view style="padding: 0 35upx;" v-if="dataList.length>0">
            <DirveCard v-for="(item,index) in dataList" :key="index" :itemData="item" @itemClick="itemClick(item)">
            </DirveCard>
            <u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
        </view>

        <no-data v-else></no-data>
        <!-- 底部导航 -->
        <HomeTabbar :tab="1"></HomeTabbar>
        <!-- 登录弹窗 -->
        <!-- <LoginMask></LoginMask> -->

        <u-picker :show="showCondition" :columns="conditionList" :title="conditionTitle" @cancel="cancel" @confirm="confirm" @change="change"></u-picker>
    </view>
</template>

<script>
import HomeTabbar from '@/components/layout/tabbar.vue';
import DirveCard from '@/components/card/dirve-card.vue';
// import LoginMask from '@/components/layout/login-mask.vue';
import {
    conditionnew,
    scheme
} from '../../common/apis/home-api.js';

export default {
    components: {
        HomeTabbar,
        DirveCard,
        // LoginMask,
    },
    data() {
        return {
            conditionTitle: '请选择',
            showCondition: false,
            conditionList: [],
            carModelTypeList: [],
            schemeTypeList: [],
            pageNo: 1,
            bizType: 7,
            schemeType: -1,
            keywords: '',
            modelTypeSearchValue: -1,
            dataList: [],
            selectCondition: [0, 0],
            selectConditionIndex: -1,
            conditionValue0: '请选择款型',
            conditionValue1: '租赁方式',
            loadingStatus: 'loading',
        };
    },
    computed: {
        deptId() {
            return this.$store.state.user.deptId;
        },
        storeName() {
            return this.$store.state.app.storeInfo.storeName;
        },
    },
    methods: {
        getConditionData() {
            conditionnew().then(res => {
                this.carModelTypeList = res.carModelTypeList;
                this.schemeTypeList = res.schemeTypeList;
            })
        },

        selectModel() {
            let conditionList = this.carModelTypeList.map(item => {
                return item.dictValue
            });

            this.conditionList = [conditionList];
            this.showCondition = true;
            this.conditionTitle = "请选择款型";
            this.selectConditionIndex = 0;
        },

        selectRenttype() {
            let conditionList = this.schemeTypeList.map(item => {
                return item.dictValue
            });

            this.conditionList = [conditionList];
            this.showCondition = true;
            this.conditionTitle = "请选择租赁方式";
            this.selectConditionIndex = 1;
        },

        getListData() {
            scheme({
                pageNo: this.pageNo,
                bizType: this.bizType,
                deptId: this.deptId,
                schemeType: this.schemeType,
                keywords: this.keywords,
                modelTypeSearchValue: this.modelTypeSearchValue,
            }).then(res => {

                if (this.pageNo == 1) {
                    this.dataList = [];
                    this.pageNo++;
                    uni.stopPullDownRefresh();

                    this.loadingStatus = 'loadmore';
                } else {
                    if (!uni.$u.test.isEmpty(res)) {
                        this.pageNo++;

                        this.loadingStatus = 'loadmore';
                    } else {

                        this.loadingStatus = 'nomore';
                    }
                }

                if (!uni.$u.test.isEmpty(res)) {
					res = res.map((item) => {
                            item.modelUrl = this.baseImageUrl + item.modelUrl;
                            return item;
                        })

                    this.dataList = this.dataList.concat(res);

                    // this.dataList = this.dataList.map(
                    //     (item) => {
                    //         item.modelUrl = this.baseImageUrl + item.modelUrl;
                    //         return item;
                    //     }
                    // )
                }

            })
        },

        change(e) {
            // console.log('change', e);
            // this.selectCondition[this.selectConditionIndex] = e.index;
        },

        close() {
            // console.log('close');
            this.showCondition = false
        },
        confirm(e) {
            this.showCondition = false;

            console.log('confirm', e.indexs[0]);
            this.selectCondition[this.selectConditionIndex] = e.indexs[0];


            if (0 === this.selectConditionIndex) {
                this.conditionValue0 = this.carModelTypeList[this.selectCondition[0]].dictValue
                this.modelTypeSearchValue = this.carModelTypeList[this.selectCondition[0]].dictCode
            } else {
                this.conditionValue1 = this.schemeTypeList[this.selectCondition[1]].dictValue
                this.schemeType = this.schemeTypeList[this.selectCondition[1]].dictCode
            }

            this.pageNo = 1;
            this.getListData();

        },
        itemClick(item) {
            console.log('条目点击了');
            uni.navigateTo({
                url: './cardetail/cardetail?bizType=' + this.bizType + "&schemeId=" + item.schemeId
            })
        },

        doSearch(value) {
            console.log('执行搜索' + value);
            this.pageNo = 1;
            this.getListData();
        },
        cancel() {
            // console.log('cancel');
            this.showCondition = false
        },

        clickloadmore() {
            this.getListData();
            this.showloading = true;
            this.loadingStatus = 'loading';
        },
		
		onShareAppMessage() {
			return {
				// title: '哈哈哈',
				// imageUrl: this.baseImageUrl + this.activityInfo.shareImage,
				path: '/pages/home/home?customerId=' + this.$store.state.user.userInfo.customerId + '&deptId='+this.$store.state.user.deptId
			}
		},

    },
    onPullDownRefresh() {
        this.pageNo = 1;
        this.getListData();
    },

    onReachBottom() {
        console.log('到底了');

        this.getListData();
        this.showloading = true;
        this.loadingStatus = 'loading';
    },
    onLoad() {
		wx.showShareMenu({
			withShareTicket:true,
		  menus: ['shareAppMessage',]
		})

        this.getConditionData();
        // this.getListData();
        
    },
    onShow() {
        this.pageNo = 1;
        this.getListData();
		uni.setNavigationBarTitle({
		    title: this.storeName || '选车'
		})
    }
};
</script>

<style lang="scss" scoped>
.page {
    // padding: $page_padding;
}

.bg {
    width: 100vw;
    height: 240upx;
    margin: 0 -20upx;
}
	
.top-bg{
	width: 100%;
	height: 152upx;
	background: linear-gradient(to bottom, #F5E0E5, #F5E2E8, #F8F8F8);
	@include flex(column);
}

.serach-wrap {
    margin: 60upx 50upx 0;
    background: #fff;
    border-radius: 8upx;
}

.filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin: 20upx 40upx 30upx;

    .title {
        font-size: 32upx;
        font-weight: bold;
        color: #333;
    }

    view {
        display: flex;
    }

    .select-wrap {
        font-size: 24upx;
        font-weight: bold;
        color: #333;

        .select {
            background: #fff;
            padding: 10upx 23upx;
            margin-left: 37upx;
            border-radius: 30px;
        }
    }
}

</style>
